<template>
  <view class="unconfirmed-orders-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="true" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无未确认订单">
      <template #top>
        <view class="header-container">
          <up-navbar title="未确认订单处理" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder @leftClick="handleBackToIndex">
          </up-navbar>

          <!-- 搜索区域 -->
          <view class="search-section">
            <view class="search-box">
              <up-input v-model="searchKeyword" placeholder="搜索车牌号" :clearable="true" :customStyle="{
                backgroundColor: '#f5f5f5',
                borderRadius: '36rpx',
                height: '72rpx',
                paddingLeft: '20rpx',
                paddingRight: '20rpx'
              }">
                <template #prefix>
                  <up-icon name="search" size="36rpx" color="#999"></up-icon>
                </template>
              </up-input>
            </view>
            <view class="search-actions">
              <up-button type="primary" @click="handleSearch" text="搜索" :customStyle="{
                width: '120rpx',
                height: '70rpx',
                fontSize: '28rpx',
                marginLeft: '20rpx'
              }">
              </up-button>
            </view>
          </view>
        </view>
      </template>

      <!-- 订单列表 -->
      <view class="order-list">
        <view v-for="(item, index) in currentList" :key="index" class="order-item" @click="handleOrderClick(item)">
          <view class="order-header">
            <view class="order-id">订单ID: {{ item.id }}</view>
            <view class="order-status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</view>
          </view>

          <view class="order-content">
            <view class="order-info-row">
              <text class="info-label">车牌号码:</text>
              <text class="info-value">{{ item.plateNumber }}</text>
            </view>
            <view class="order-info-row">
              <text class="info-label">停车位置:</text>
              <text class="info-value">{{ item.parkingLocation }}</text>
            </view>
            <view class="order-info-row">
              <text class="info-label">核验时间:</text>
              <text class="info-value">{{ item.verifyTime }}</text>
            </view>
            <view class="order-info-row">
              <text class="info-label">核验人员:</text>
              <text class="info-value">{{ item.verifier }}</text>
            </view>
            <view class="order-info-row">
              <text class="info-label">未确认原因:</text>
              <text class="info-value">{{ item.unconfirmedReason }}</text>
            </view>
          </view>

          <view class="order-actions">
            <up-button type="primary" @click.stop="handleConfirm(item)" text="确认处理" :customStyle="{
              width: '180rpx',
              height: '70rpx',
              fontSize: '28rpx',
              marginRight: '20rpx'
            }">
            </up-button>

            <up-button type="default" @click.stop="handleReject(item)" text="拒绝处理" :customStyle="{
              width: '180rpx',
              height: '70rpx',
              fontSize: '28rpx',
              color: '#f5222d',
              backgroundColor: '#fff',
              border: '1px solid #f5222d'
            }">
            </up-button>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

// 响应式数据
const paging = ref<any>(null)
const currentList = ref<any[]>([])
const searchKeyword = ref('')

// 页面加载
onLoad(() => {
  loadData()
})

// 页面显示
onShow(() => {
  loadData()
})

// 页面挂载
onMounted(() => {
  loadData()
})

// 加载数据
const loadData = () => {
  paging.value?.reload()
}

// 查询列表数据
const queryList = async (pageNo: number, pageSize: number) => {
  try {
    // 构建查询参数
    const params = {
      pageNo,
      pageSize,
      keyword: searchKeyword.value
    }

    // TODO: 调用API获取未确认订单列表
    // const res = await getUnconfirmedOrderList(params)

    // 模拟数据
    const mockData = [
      {
        id: 101,
        plateNumber: '粤B12345',
        parkingLocation: 'A区-123号',
        verifyTime: '2024-01-15 14:30:00',
        verifier: '张三',
        status: 'unconfirmed',
        unconfirmedReason: '车辆信息与登记不符'
      },
      {
        id: 102,
        plateNumber: '粤A67890',
        parkingLocation: 'B区-456号',
        verifyTime: '2024-01-16 09:15:00',
        verifier: '李四',
        status: 'unconfirmed',
        unconfirmedReason: '无法确认车辆所有权'
      },
      {
        id: 103,
        plateNumber: '粤C54321',
        parkingLocation: 'C区-789号',
        verifyTime: '2024-01-16 11:45:00',
        verifier: '王五',
        status: 'unconfirmed',
        unconfirmedReason: '车辆外观与记录不符'
      }
    ]

    paging.value?.complete(mockData)
  } catch (error) {
    console.error('查询未确认订单列表失败:', error)
    paging.value?.complete([])
  }
}

// 搜索
const handleSearch = () => {
  paging.value?.reload()
}

// 订单点击
const handleOrderClick = (item: any) => {
  uni.navigateTo({
    url: `/pages/vehicle-internal-verify/vehicle-detail?id=${item.id}&type=unconfirmed`
  })
}

// 确认处理
const handleConfirm = (item: any) => {
  uni.showModal({
    title: '确认',
    content: `确定要处理车牌号为 ${item.plateNumber} 的未确认订单吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 调用API确认处理
        // await confirmUnconfirmedOrder(item.id)
        uni.showToast({
          title: '处理成功',
          icon: 'success'
        })
        loadData()
      }
    }
  })
}

// 返回到场内车辆核验首页
const handleBackToIndex = () => {
  uni.redirectTo({
    url: '/pages/vehicle-internal-verify/index'
  })
}

// 拒绝处理
const handleReject = (item: any) => {
  uni.showModal({
    title: '拒绝处理',
    content: `确定要拒绝处理车牌号为 ${item.plateNumber} 的未确认订单吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 调用API拒绝处理
        // await rejectUnconfirmedOrder(item.id)
        uni.showToast({
          title: '已拒绝处理',
          icon: 'success'
        })
        loadData()
      }
    }
  })
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    unconfirmed: '未确认',
    confirmed: '已确认',
    rejected: '已拒绝'
  }
  return statusMap[status] || status
}

// 获取状态样式类
const getStatusClass = (status: string) => {
  const statusClassMap: Record<string, string> = {
    unconfirmed: 'status-unconfirmed',
    confirmed: 'status-confirmed',
    rejected: 'status-rejected'
  }
  return statusClassMap[status] || ''
}
</script>

<style lang="scss" scoped>
.unconfirmed-orders-page {
  padding: 0 30rpx;

  .header-container {
    padding: 20rpx;

    .search-section {
      display: flex;
      align-items: center;
      margin: 20rpx 0 30rpx;

      .search-box {
        flex: 1;
      }

      .search-actions {
        display: flex;
        align-items: center;
      }
    }
  }

  .order-list {
    padding: 20rpx;

    .order-item {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

      .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        padding-bottom: 16rpx;
        border-bottom: 1px solid #f0f0f0;

        .order-id {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }

        .order-status {
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: 6rpx;

          &.status-unconfirmed {
            background-color: #fff7e6;
            color: #fa8c16;
          }

          &.status-confirmed {
            background-color: #f6ffed;
            color: #52c41a;
          }

          &.status-rejected {
            background-color: #fff1f0;
            color: #f5222d;
          }
        }
      }

      .order-content {
        margin-bottom: 20rpx;

        .order-info-row {
          display: flex;
          margin-bottom: 12rpx;
          font-size: 26rpx;

          .info-label {
            width: 160rpx;
            color: #666;
          }

          .info-value {
            flex: 1;
            color: #333;
          }
        }
      }

      .order-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 20rpx;
      }
    }
  }
}
</style>